<template>
  <div class="repair-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6" v-for="(stat, index) in repairStats" :key="stat.title">
        <el-card :class="['stat-card', `stat-card-${index + 1}`]">
          <template #header>
            <div class="card-header">
              <el-icon>
                <component :is="stat.icon"></component>
              </el-icon>
              <span>{{ stat.title }}</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-number">{{ stat.count }}</div>
            <div class="card-trend">
              <span>较上月</span>
              <span :class="stat.trend >= 0 ? 'trend-up' : 'trend-down'">
                {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 维修申请表格 -->
    <el-card class="table-card">
      <div class="table-header">
        <el-button type="primary" :icon="Plus" class="add-button" @click="handleAdd">
          新建维修申请
        </el-button>
      </div>

      <el-table :data="repairList" v-loading="loading" border stripe highlight-current-row>
        <el-table-column type="expand">
          <template #default="{ row }">
            <div class="repair-detail">
              <div class="detail-item">
                <el-icon>
                  <Location />
                </el-icon>
                <span>维修地点：{{ row.location }}</span>
              </div>
              <div class="detail-item">
                <el-icon>
                  <Document />
                </el-icon>
                <span>详细描述：{{ row.description }}</span>
              </div>
              <div class="detail-item">
                <el-icon>
                  <Timer />
                </el-icon>
                <span>申请时间：{{ row.create_time }}</span>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column type="index" label="#" width="60" align="center">
          <template #default="scope">
            <div class="index-cell">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="repair_id" label="工单号" width="120" align="center">
          <template #default="{ row }">
            <el-tag effect="plain">{{ row.repair_id }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="维修类型" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="priority" label="优先级" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getPriorityTag(row.priority)" effect="dark">
              {{ row.priority }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button type="primary" :icon="View" size="small" @click="handleView(row)">
                查看
              </el-button>
              <el-button type="success" :icon="Check" size="small" @click="handleComplete(row)"
                v-if="row.status === '待处理'">
                完成
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新建维修申请对话框 -->
    <el-dialog v-model="dialogVisible" title="新建维修申请" width="50%" center destroy-on-close class="repair-dialog">
      <el-form ref="formRef" :model="repairForm" :rules="rules" label-width="100px" class="repair-form">
        <el-form-item label="维修类型" prop="type">
          <el-select v-model="repairForm.type" placeholder="请选择维修类型" class="w-full">
            <el-option v-for="item in repairTypes" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="维修地点" prop="location">
          <el-cascader v-model="repairForm.location" :options="locationOptions" placeholder="请选择维修地点" class="w-full" />
        </el-form-item>

        <el-form-item label="优先级" prop="priority">
          <el-radio-group v-model="repairForm.priority">
            <el-radio label="低">低</el-radio>
            <el-radio label="中">中</el-radio>
            <el-radio label="高">高</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="问题描述" prop="description">
          <el-input v-model="repairForm.description" type="textarea" rows="4" placeholder="请详细描述问题..." />
        </el-form-item>

        <el-form-item label="图片" prop="images">
          <el-upload class="repair-uploader" action="#" list-type="picture-card" :auto-upload="false"
            :on-change="handleImageChange">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            提 交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Tools,
  Plus,
  View,
  Check,
  Location,
  Document,
  Timer,
  Warning,
  InfoFilled,
  CircleCheck
} from '@element-plus/icons-vue'

// 统计数据
const repairStats = [
  {
    title: '总维修单',
    count: 156,
    trend: 12.5,
    icon: Tools
  },
  {
    title: '待处理',
    count: 23,
    trend: -5.2,
    icon: Warning
  },
  {
    title: '处理中',
    count: 45,
    trend: 8.3,
    icon: InfoFilled
  },
  {
    title: '已完成',
    count: 88,
    trend: 15.7,
    icon: CircleCheck
  }
]

// 维修类型选项
const repairTypes = [
  '水电维修',
  '家具维修',
  '门窗维修',
  '网络维修',
  '空调维修',
  '其他'
]

// 维修地点选项
const locationOptions = [
  {
    value: '义苑',
    label: '义苑',
    children: Array.from({ length: 6 }, (_, i) => ({
      value: `${i + 1}层`,
      label: `${i + 1}层`,
      children: Array.from({ length: 10 }, (_, j) => ({
        value: `${(i + 1) * 100 + j + 1}`,
        label: `${(i + 1) * 100 + j + 1}室`
      }))
    }))
  },
  // ...其他宿舍楼
]

// 表单数据
const dialogVisible = ref(false)
const submitLoading = ref(false)
const formRef = ref(null)
const repairForm = ref({
  type: '',
  location: [],
  priority: '中',
  description: '',
  images: []
})

// 表单验证规则
const rules = {
  type: [{ required: true, message: '请选择维修类型', trigger: 'change' }],
  location: [{ required: true, message: '请选择维修地点', trigger: 'change' }],
  description: [
    { required: true, message: '请填写问题描述', trigger: 'blur' },
    { min: 10, max: 500, message: '描述长度在 10 到 500 个字符', trigger: 'blur' }
  ]
}

// 标签类型
const getTypeTag = (type) => {
  const types = {
    '水电维修': 'info',
    '家具维修': 'success',
    '门窗维修': 'warning',
    '网络维修': 'danger',
    '空调维修': ''
  }
  return types[type] || 'info'
}

const getStatusTag = (status) => {
  const types = {
    '待处理': 'warning',
    '处理中': 'primary',
    '已完成': 'success'
  }
  return types[status] || 'info'
}

const getPriorityTag = (priority) => {
  const types = {
    '低': 'info',
    '中': 'warning',
    '高': 'danger'
  }
  return types[priority] || 'info'
}
</script>

<style scoped>
.repair-container {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 16px;
  transition: all 0.3s;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stat-card-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-2 {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.stat-card-3 {
  background: linear-gradient(135deg, #2dd4bf 0%, #0ea5e9 100%);
}

.stat-card-4 {
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header .el-icon {
  font-size: 24px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  border-radius: 12px;
}

.card-header span {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.card-content {
  padding: 20px;
  text-align: center;
  color: white;
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-trend {
  font-size: 14px;
}

.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}

.table-card {
  background: white;
  border-radius: 16px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.table-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.add-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  padding: 12px 24px;
  transition: all 0.3s;
}

.add-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.2);
}

.repair-dialog :deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
}

.repair-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  margin: 0;
}

.repair-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 500;
}

.repair-form {
  padding: 30px 20px;
}

.repair-uploader :deep(.el-upload--picture-card) {
  border-radius: 12px;
  transition: all 0.3s;
}

.repair-uploader :deep(.el-upload:hover) {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(102, 126, 234, 0.1);
}

.repair-detail {
  padding: 20px;
  background: linear-gradient(to right, #f6f8ff, #f0f3ff);
  border-radius: 8px;
  margin: 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #666;
}

.detail-item .el-icon {
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 8px;
  border-radius: 8px;
}
</style>
